<template>
  <div id="app">
    <VHeader v-if="!$route.meta.isHeader"/>
    <router-view/>
    <VFoot v-if="!$route.meta.isHeader"/>
  </div>
</template>

<!--<template>-->
<!--  <div id="app2">-->
<!--    <router-view v-if="isRouterAlive"></router-view>-->
<!--  </div>-->
<!--</template>-->

<script>
  import VHeader from "./components/v-header";
  import VFoot from "./components/v-footer";

  export default {
    components: {
      VHeader,
      VFoot
    },
    name: 'App',
    provide() { // 注册一个方法
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        isHeader: true
      }
    },
    methods: {
      reload() {
        this.isHeader = false
        this.$nextTick(function() {
          this.isHeader = true
        })
      }
    }
  };
</script>
<style lang="scss">
  .el-select-dropdown {
    .el-select-dropdown__wrap {
      overflow-x: visible;
    }
  }
</style>
<style lang="scss">

  #app {
    height: 100%;
  }
  .el-tabs{
    color: #2D2D2D;
  }
  el-button{
    background-color: #2D2D2D;
    color: #e88f09;
  }
  /*单独的样式*/
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;

  }

  p {
    margin: 0px;
  }

  body {
    background-color: rgba(242, 242, 242, 1) !important;
  }

  .group {

    .ant-tabs-bar {
      background-color: #fff !important;
      padding-left: 24px !important;
    }

    .ant-tabs-nav-container {
      line-height: 3.5 !important;
    }

  }

  .ant-tabs-tab-active {
    color: #000 !important;
    font-weight: 800 !important;
  }

  .ant-tabs-tab {
    font-size: 16px !important;
  }

  .ant-tabs-ink-bar {
    background-color: #000000 !important;
    height: 4px !important;
  }

  .ant-tabs-nav .ant-tabs-tab:hover {
    color: #000 !important;
    font-weight: 800 !important;
  }

  .ant-btn-primary {
    background-color: #4c4c4c !important;
    font-size: 14px !important;
    color: #FFEC70 !important;
    border-color: #4c4c4c !important;
  }

  .ant-input:hover {
    border-color: #000 !important;
    border-right-width: 1px !important;
  }

  .ant-select-selection:hover {
    border-color: #000 !important;
    border-right-width: 1px !important;
  }

  /*.ant-table {
  color: rgba(0, 0, 0, 0.65) !important;
  }*/

  .ant-table-thead > tr > th {
    /*background: #4c4c4c !important;*/
    /*color: #FFEC70 !important;*/
    text-align: center !important;
    border-right: 1px solid #ccc;
  }

  .ant-table-tbody > tr > td {
    text-align: center !important;
    border-bottom: none !important;
  }

  .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background-color: rgb(204, 204, 204) !important;
    cursor: pointer;
  }

  .ant-pagination-item-active:focus a,
  .ant-pagination-item-active:hover a {
    color: #FFEC70 !important;
  }

  .ant-pagination-item-active {
    color: #FFEC70 !important;
    border-color: #FFEC70 !important;
    background-color: #FFEC70 !important;
  }

  .ant-pagination-item-active a {
    color: rgba(0, 0, 0, 0.647) !important;
  }

  .ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
    box-shadow: 0 0 0 2px rgba(76, 76, 76, 0.2) !important;
    border-color: #4c4c4c !important;
  }

  .ant-select-focused .ant-select-selection,
  .ant-select-selection:focus,
  .ant-select-selection:active {
    box-shadow: 0 0 0 2px rgba(76, 76, 76, 0.2) !important;
    border-color: #4c4c4c !important;
  }

  .ant-input:focus {
    box-shadow: 0 0 0 2px rgba(76, 76, 76, 0.2) !important;
    border-color: #4c4c4c !important;
  }

  .table-css .ant-table-thead > tr > th {
    background: rgba(249, 249, 249, 1) !important;
    color: rgb(68, 68, 68) !important;
    text-align: center !important;
    border-right: 1px solid #fff;
    font-size: 15px !important;
  }

  .table-css .ant-table-tbody > tr > td {
    font-size: 13px !important;
    color: #333 !important;
  }

  .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: #f0f0f0 !important;
  }

  .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: #f0f0f0 !important;
  }

  .address {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    background-color: #fff;

    &
    > div {
      width: 80%;
      margin: 0 auto;
      display: flex;
      align-items: center;

      p {
        font-weight: 400;
        font-style: normal;
        color: #A8A8A8;
        font-size: 13px;
        margin: 0px;
      }

      .link {
        padding-left: 15px;
        font-size: 14px;
        color: #4C4C4C;
        text-align: left;
      }

    }
  }

  .ant-input {
    height: 38px !important;
  }

  .ant-select-selection--single {
    height: 38px !important;
  }

  .ant-select-selection__rendered {
    line-height: 38px !important;
  }

  .ant-btn {
    height: 38px !important;
  }

  .ant-btn:hover, .ant-btn:focus {
    color: #FFEC70 !important;
    background-color: #4c4c4c !important;
    border-color: #4c4c4c !important;
  }

  .ant-btn-danger {
    background-color: #4c4c4c !important;
    border-color: #4c4c4c !important;
  }

  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #4c4c4c !important;
    border-color: #4c4c4c !important;
  }

  .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus
  + .ant-checkbox-inner {

    border-color: #4c4c4c !important;
  }

</style>
